<!--
 * @Author: bao
 * @Description: 用户管理
 * @Date: 2020-02-02 14:53:02
 -->
<template>
  <div style="padding: 10px 20px; background-color: #fff;">
    <p class="title">用户管理</p>
    <div class="btnBox">
      <a-button type="primary" @click="onAdd">新增用户</a-button>
      <div class="box">
        <div class="single-search-item" style="width: 404px;">
          <div class="item-content">
            <a-input-search
              v-model="getPars.name"
              placeholder="请输入用户名"
              enterButton="搜索"
              style="width: 300px;"
              @search="onSelectType"
            />
            <a-button type="primary" @click="reSet" style="margin-left:20px"
              >重置</a-button
            >
          </div>
        </div>
      </div>
    </div>
    <a-table
      style="overflow-x: scroll;"
      :columns="listObject.columns"
      :dataSource="listObject.list"
      :loading="listObject.loading"
      :pagination="pagination"
      rowKey="id"
      @change="handleTableChange"
    >
      <span slot="order" slot-scope="text, record, index">
        <em>{{ index + 1 }}</em>
      </span>
      <span slot="status" slot-scope="text">
        <span v-if="text === 1" class="success-status icon icon1">启用</span>
        <span v-if="text === 2" class="error-status icon icon2">停用</span>
      </span>
      <template slot="todo" slot-scope="text, record">
        <div class="table-tr-todo">
          <a href="javascript:;" @click="onEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <template v-if="record.status === 1">
            <a-popconfirm
              title="确定停用当前用户吗?"
              @confirm="() => onPwStopOrStart(record.id, 2)"
              okText="确定"
              cancelText="取消"
            >
              <a href="javascript:;">停用</a>
            </a-popconfirm>
          </template>
          <template v-else>
            <a-popconfirm
              title="确定启用当前用户吗?"
              @confirm="() => onPwStopOrStart(record.id, 1)"
              okText="确定"
              cancelText="取消"
            >
              <a href="javascript:;">启用</a>
            </a-popconfirm>
          </template>
          <!-- <template v-if="text === 2"> -->
          <a-divider type="vertical" />
          <a href="javascript:;" @click="onPwShow(record.id)">修改密码</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定重置密码吗?"
            @confirm="() => onPwReset(record.id)"
            okText="确定"
            cancelText="取消"
          >
            <a href="javascript:;">重置密码</a>
          </a-popconfirm>

          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除当前用户吗?"
            @confirm="() => onDelete(record.id)"
            okText="确定"
            cancelText="取消"
          >
            <a href="javascript:;" style="color:#FF0033">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
    <password ref="pw" />
    <user ref="user" @addSuccess="getList" @updateSuccess="getList" />
  </div>
</template>

<script>
import { page } from "@/api";
import user from "./components/user";
import password from "./components/password";
export default {
  components: {
    user,
    password
  },
  data() {
    return {
      listObject: {
        loading: false,
        list: [],
        columns: [
          {
            title: "序号",
            align: "center",
            dataIndex: "order",
            scopedSlots: { customRender: "order" },
            width: 80,
            customRender: (text, record, index) =>
              `${(this.pagination.current - 1) * this.pagination.pageSize +
                (index + 1)}`
          },
          {
            title: "用户名",
            dataIndex: "nickName",
            scopedSlots: { customRender: "nickName" },
            align: "center"
          },
          {
            title: "登录账户",
            dataIndex: "username",
            scopedSlots: { customRender: "username" },
            align: "center"
          },
          {
            title: "账户状态",
            dataIndex: "status",
            scopedSlots: { customRender: "status" },
            align: "center"
          },
          {
            title: "角色",
            dataIndex: "roleName",
            scopedSlots: { customRender: "roleName" },
            align: "center"
          },
          {
            title: "操作",
            width: 400,
            dataIndex: "todo",
            scopedSlots: {
              customRender: "todo"
            }
          }
        ]
      },
      pagination: {
        current: 1,
        pageSize: 20
      },
      getPars: {
        currentPage: 1,
        pageSize: 10,
        name: "",
        sorter: "descend"
      },
      isPwShow: false,
      pwconfirmLoading: false
    };
  },
  created() {
    this.getList();
  },
  computed: {},
  mounted() {},
  methods: {
    reSet() {
      this.getPars = {
        currentPage: 1,
        pageSize: 10,
        name: ""
      };
      this.getList();
    },
    onPwShow(id) {
      this.$refs.pw.show(id);
    },
    onPwReset(id) {
      page
        .resetPassword({ id: Number(id) })
        .then(res => {
          if (res.data.code === -1) {
            this.$message.warning(res.data.message);
          } else {
            this.$message.success("重置密码成功！");
          }
        })
        .catch(() => {
          this.$message.warning("重置密码失败");
        });
    },
    onPwStopOrStart(id, status) {
      page
        .stopOrStart({ id: Number(id), status: status })
        .then(res => {
          if (res.data.code === -1) {
            this.$message.warning(res.data.message);
          } else {
            this.getList();
            this.$message.success("操作成功！");
          }
        })
        .catch(() => {
          this.$message.warning("操作失败！");
        });
    },
    pwCancel() {
      this.isPwShow = false;
    },
    onAdd() {
      this.$refs.user.show();
    },
    onEdit(record) {
      this.$refs.user.show(record);
    },
    onDelete(id) {
      page
        .deleteUser({ id: Number(id) })
        .then(res => {
          if (res.data.code === -1) {
            this.$message.warning(res.data.message);
          } else {
            this.$message.success("删除用户成功！");
            this.getList();
          }
        })
        .catch(() => {
          this.$message.warning("删除用户失败");
        });
    },
    onSelectType() {
      this.getPars.currentPage = 1;
      this.getList();
    },
    handleTableChange(pagination, filters, sorter) {
      this.getPars.currentPage = pagination.current;
      this.getList();
    },
    getList() {
      this.listObject.loading = true;
      page.getPageList(this.getPars).then(res => {
        let { current, size, total } = res.data.data;
        this.listObject.list = res.data.data.records;
        this.listObject.loading = false;
        this.setPagination(current, size, total);
      });
    },
    setPagination(current, size, total) {
      this.pagination = {
        current: current,
        pageSize: size,
        total: total,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条记录`
      };
    }
  }
};
</script>

<style scoped lang="less">
.title {
  font-size: 24px;
  color: #333333ff;
  padding-bottom: 10px;
  border-bottom: 2px solid #ccccccff;
}
.btnBox {
  position: relative;
  height: 70px;
  overflow: hidden;
  margin-top: 30px;
  .btn {
    margin-left: 12px;
    margin-top: 10px;
  }
  .box {
    position: absolute;
    right: 0;
    top: 0;
    .single-search-item {
      // display: inline-block;
      float: left;
      width: 400px;
      padding: 10px;
    }
    .item-label {
      display: inline-block;
      width: 80px;
    }
    .item-content {
      display: inline-block;
      // width: 240px;
    }
  }
}
.success-status {
  position: relative;
  color: green;
}
.error-status {
  position: relative;
  color: red;
}
.icon::before {
  content: " ";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: -14px;
  top: 7px;
}
.icon1::before {
  background-color: green;
}
.icon2::before {
  background-color: red;
}
</style>
